<template>
	<!-- 教师列表模块 -->
	<view class="wrap" :class="mclass" @click="navTo(teacher.teacher_id)">
		<view class="teacher-info">
			<view class="avatar">
				<headimg :realSrc="teacher.headimg"></headimg>
				<!-- <image class="pic" :src="teacher.figureimg"></image> -->
			</view>
			<view class="summary">
				<text class="name">{{ teacher.teacher_name == null ? '智慧教育老师' : teacher.teacher_name }}</text>
				<text class="grade">{{ teacher.impression == null ? '暂无标签' : teacher.impression }}</text>
				<!-- <text class="name">{{ teacher.teacher_name }}</text>
				<text class="grade">{{ teacher.impression }}</text> -->
			</view>
		</view>
		<!-- <text class="personality">{{ teacher.sketch }}</text> -->
		<text class="personality">{{ teacher.sketch == null ? '暂无简介' : teacher.sketch }}</text>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue'
	export default {
		props: {
			teacher: Object, // 名师推荐每条数据
			mclass: String
		},
		components: {
			headimg
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: 'teacher-page?teacher_id=' + this.teacher.teacher_id
				})
			}
		}
	}
</script>

<style scoped>
	.wrap {
		padding: 20upx;
		width: 360upx;
		border-radius: 20upx;
		background: #FAFAFA;
		white-space: normal;
		height: 208upx;
	}

	.teacher-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		border-radius: 50%;
		width: 80upx;
		height: 80upx;
		overflow: hidden;
		flex: none;
	}

	.avatar .pic {
		width: 100%;
		height: 100%;
		background: rgba(130, 255, 221, 0.7);
	}

	.summary {
		display: flex;
		flex-direction: column;
		margin-left: 10upx;
		width: 90%;
	}

	.summary .name {
		font-size: 32upx;
		font-weight: bold;
		color: #333;
	}

	.summary .grade {
		font-size: 26upx;
		color: #999;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		max-width: 90%;
	}

	.personality {
		display: flex;
		margin-top: 22upx;
		color: #666;
		font-size: 26upx;
		line-height: 42upx;
		letter-spacing: 2upx;
		word-wrap: break-word;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		height: 84upx;
	}
</style>
